<template>
	<view class="layout">
		
		<view class="order">
			<!-- 地图 -->
			<map-gd v-if="current === 1"></map-gd>
			<!-- 地图 -->
			<view class="select">
				<view class="left">
					<view class="">
						用餐方式{{tableNo?"桌号:"+tableNo:""}}
					</view>
					
					    <view v-show="current === 0">
							堂食
						</view>
						<view v-show="current === 1">
							自提
						</view>
						
				</view>
						
			</view>
			
			<!-- //自提预约时间 -->
			
			<view class="zttime" v-if="current === 1">
				
				<view class="left">
					预约时间
				</view>
				
				<view class="right">
					<view class="text">
						<picker mode="time" :value="time" start="09:01" end="23:01" @change="changeTime">
												<view class="uni-input">{{time}}</view>
						</picker>
					</view>
				
					<uni-icons type="forward" size="16"></uni-icons>

				</view>
			</view>
			
			<scroll-view scroll-y  class="orderList">
				<view class="row" v-for="(item,index) in carData" :key="index">
					<view class="left">
						<image :src="item.pic" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title">
							{{item.title}}
						</view>
						<view class="label">
							{{item.content}}
						</view>
						<view class="num">
							x{{item.num}}
						</view>
					</view>
					<view class="right">
						￥{{toFixed(item.num * item.gold,2)}}
					</view>
				</view>
			</scroll-view>
			
			<view class="count">
				<view class="shang" v-if="current === 1">
					<view class="left">
						打包费
					</view>
					
					<view class="right">
						￥{{packingCharge}}
					</view>
				</view>
				
				<view class="zhong">
						<view class="left">
							<image src="../../static/quan.png" mode=""></image>
							<view class="centent">
								优惠券
							</view>
						</view>
						
						<view class="right" @click="clickYh">
							<view class="text">
								{{coupon.default}}
							</view>
							<uni-icons type="forward" size="16"></uni-icons>
						</view>
				</view>
				
				
				
				<view class="xia">
					<view class="left">
						
					</view>
					<view class="right">
						<view class="box1">
							共优惠
						</view>
						<view class="box2">
							{{couponNum}}
						</view>
						<view class="box3">
							合计
						</view>
						<view class="box4">
							{{carAllPrice}}
						</view>
					</view>
				</view>
			</view>
			
			<!-- 电话与备注信息 -->
			<view class="phone">
				<view class="phoneDetail">
					
					<view class="left">
						预留电话
					</view>
					<view class="phoneNo">
						13712750849
					</view>
				</view>
				
				<view class="bz">
					<view class="left">
						备注
					</view>
					
					<view class="right">
						<view class="text">
							{{notes.default}}
						</view>
						<uni-icons type="forward" size="16"></uni-icons>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 底部固定订单支付按钮 -->
		<view class="butPay">
			<view class="left">
				<view class="shang">
					<view class="box1">
						共7件
					</view>
					<view class="box2">
						合计:
					</view>
					<view class="box3">
						￥{{carAllPrice}}
					</view>
				</view>
				<view class="xia">
					<view class="box1">
						共优惠
					</view>
					<view class="box2">
						￥{{couponNum}}
					</view>
				</view>
			</view>
			<view class="right">
				<button type="button">提交支付</button>
			</view>
		</view>
		
		<!-- 优惠券弹框开始 -->
		<uni-popup ref='yhPopup' type='bottom':safe-area="false">
			<view class="yhPopup">
				<view class="popheader">
					<view></view>
					<view class="title">优惠券</view>
					<view class="close" @click="closeYh">X</view>
				</view>
				
				<scroll-view scroll-y>
						<view class="content" v-for="(item,index) in couponDetails" :key="item.id">
							<coupon-detail :item = "item">
								
								<template #shang>
									
								</template>
								<template #xia>
									<button type="button" :disabled="carAllPrice < item.couponStartAmount?true:false" @click="makeCoupop(item,index)">{{carAllPrice < item.couponStartAmount?'不可用':'使用'}}</button>
								</template>
							</coupon-detail>
							
						
							
						</view>
						
						<view class="safe-area-shop">
						 	
						 </view>
						<view class="safe-area-inset-bottom">
							
						</view>
				</scroll-view>
			
			</view>
		</uni-popup>
		<!-- 优惠券弹框结束 -->
	</view>
</template>

<script setup>
import {onLoad,onShow} from "@dcloudio/uni-app";
import {toFixed,formatTimestamp} from "../../utils/common.js";
import { ref } from "vue";

const carData = ref([]);
const carAllPrice = ref(0);
const current = ref(0);
const items = ref(['堂食','自提']);
const tableNo = ref("");
const packingCharge = ref(0);//打包费
const time = ref(formatTimestamp(Date.now(),"HH:mm"));

const couponNum = ref(0);//优惠金额
var beforeCoupopPrice = 0;//优惠前金额
const coupon = ref({
	default:"选择优惠券",
	isSet:1
})

const notes = ref({
	default:"口味偏好等要求",
	isSet:0
})

var makeCoupopId = null;
//定义优惠券
const couponDetails = ref([
	{
		id:1,
		type:1,//1无门槛 2满减
		amount:8,
		couponStartAmount:0,
		endTime:Date.now()+370000,
		endStatus:1
		
	},
	{
		id:2,
		type:2,//1无门槛 2满减
		amount:15,
		couponStartAmount:100,
		endTime:Date.now()+370000,
		endStatus:1
	},
	{
		id:3,
		type:2,//1无门槛 2满减
		amount:50,
		couponStartAmount:200,
		endTime:Date.now()+370000,
		endStatus:1
	}
])

const yhPopup =ref(null);

	onLoad((e)=>{
		console.log('类型'+e.type);
		console.log('总价'+e.carAllPrice);
		console.log('桌码'+e.tableNo);
		console.log(uni.getStorageSync('carData'));
		carData.value = uni.getStorageSync('carData');
		carAllPrice.value =e.carAllPrice;
		current.value = Number(e.type);
		console.log(typeof current.value);
		tableNo.value = e.tableNo;
		packingCharge.value = carData.value.length * 1;
		carAllPrice.value = toFixed(Number(carAllPrice.value) + packingCharge.value,2);
		beforeCoupopPrice = carAllPrice.value;
	});	
	
	const changeTime = (e)=>{
	
		time.value = e.detail.value;
	}
	
	//优惠券弹框
	const clickYh = ()=>{
		yhPopup.value.open();
	}
	
	
	const closeYh = ()=>{
		yhPopup.value.close();
	}
	
	//使用优惠券
	const makeCoupop = (item,index)=>{
		makeCoupopId = item.id;
		coupon.value.default = "满"+item.couponStartAmount+"减"+item.amount
		coupon.value.isSet = 1;
		carAllPrice.value = toFixed(beforeCoupopPrice - item.amount,2);
		couponNum.value = item.amount;
		yhPopup.value.close();
	}
	
</script>

<style lang='scss' scoped>
.layout{
	background: $uni-bg-color-grey;
	.popheader{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		padding-bottom: 20rpx;
		.title{
			color: $xx-color-body;
			
		}
		.close{
			color: red;
			padding: 4rpx;
			
		}
	}
	
	.order{
		padding: 20rpx 30rpx;
		.select{
							
							 width:100%;
							 height: 75rpx;
							 display: flex;
							 justify-content: space-between;
							 align-items: center;
							 .right{
								 width:140rpx;
								 height:70rpx;
								 font-size: 24rpx;
								 
							 }
							 .left{
								 display: flex;
								 justify-content: space-between;
								 align-items: center;
								 width: 690rpx;
								 height: 70rpx;
								 border-radius: 5rpx;
								 border: 1px solid $xx-color-body;
								 color: $xx-color-body;
								 padding: 0 20rpx;
								 font-size: 28rpx;
								 line-height: 70rpx;
							 }
		}
		
		.zttime{
			display: flex;
			justify-content: space-between;
			font-size:26rpx;
			line-height: 100rpx;
			.left{
				
			}
			.right{
				display: flex;
				justify-content: space-between;
				color: $xx-color-body;
				.text{
					
					font-weight: 600;
				}
			}
		}
		
		.orderList{
			max-height: 30vh;
			.row{
				padding: 10rpx 20rpx;
				display: flex;
				
				.left{
					width:100rpx;
					height:100rpx;
					
					image{
						width:100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
				.content{
					width: 500rpx;
					padding-left: 10rpx;
					.title{
						font-size: 28rpx;
						
					}
					.label{
						font-size: 24rpx;
						color:#888;
					}
					.num{
						font-size: 22rpx;
						color:#888;
					}
				}
				
				.right{
					font-weight: 550;
				}
			}
		}
		
		.count{
			
			border-radius: 20rpx;
			background: $uni-bg-color;
			box-shadow: 0 8px 6px -6px #ccc;
			margin-top:20rpx;
			
			.shang{
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				font-size: 26rpx;
			}
			
			.zhong{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				.left{
					display: flex;
					align-items: center;
					
					image{
						padding-right: 10rpx;
						width: 50rpx;
						height: 50rpx;
					}
				}
				
				.right{
					display: flex;
					align-items: center;
					color:#bbb;
				}
				
			}
			
			.xia{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.right{
					display: grid;
					gap:5rpx;
					grid-template-columns:repeat(4,1fr);
					padding: 20rpx 30rpx;
					font-size: 24rpx;
					.box2{
						color:red;
					}
					
					.box4{
						font-size: 32rpx;
						font-weight: 600;
					}
				}
			}
			
			
		}
		
		.phone{
			
			margin-top:20rpx;
			padding: 20rpx 30rpx;
			font-size: 26rpx;
			border-radius: 20rpx;
			background: $uni-bg-color;
			box-shadow: 0 8px 6px -6px #ccc;
			.phoneDetail{
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.bz{
				padding: 40rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					
					
				}
				
				.right{
					display: flex;
					justify-content: space-between;
					align-items: center;
					color:#bbb;
					.text{
						
					}
				}
			}
		}
		
	}
	
	.butPay{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 60rpx;
		border-top: 1rpx solid #eee;
		width: 750rpx;
		/* box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1); */
		position: fixed;
		/* #ifdef H5 */
		 bottom:4vh;
		/* #endif */
		/* #ifndef H5 */
		 bottom:4vh;
		/* #endif */
		font-size:24rpx;
		.left{
			.shang{
				display: grid;
				gap:5rpx;
				grid-template-columns: repeat(3,1fr);
				.box3{
					font-size:28rpx;
					font-weight: 600;
					color: $xx-color-body;
				}
			}
			.xia{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.box2{
					font-size:26rpx;
					font-weight: 600;
					color: $xx-color-body;
				}
			}
		}
		
		.right{
			
			button::after{ border: none;}
			button{
				border-radius: 50rpx;
				background: $xx-color-body;
				color:#fff;
			}
		}
		
	}
	
	.yhPopup{
		position: relative;
		background:#fff;
		padding: 30rpx;
		border-radius: 30rpx 30rpx 0 0;
		overflow: hidden;
		width:100vw;
		
		scroll-view{
			max-height: 60vh;
		}
		
		.content{
			button{
				border-radius: 50rpx;
				color: $xx-color-body;
				height: 50rpx;
				font-size: 24rpx;
				line-height: 50rpx;
			}
		}
	}
}
</style>
